<template>
  <div class="app">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="首页">
        <home></home>
      </a-tab-pane>
      <a-tab-pane key="2" tab="我的报名" force-render>
        <signup></signup>
      </a-tab-pane>
      <a-tab-pane key="3" tab="我的证书">
        <certificate></certificate>
      </a-tab-pane>
      <a-tab-pane key="4" tab="我的信息">
        <mymessage></mymessage>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import home from "../home/home.vue";
import signup from "../signup/signup.vue";
import certificate from "../certificate/certificate.vue";
import mymessage from "../mymessage/mymessage.vue";

// import { UserOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  components: {
    home,
    signup,
    certificate,
    mymessage,
    // UserOutlined,
  },
  setup() {
    return {
      activeKey: ref("1"),
    };
  },
});
</script>
<style scoped>
.app {
  width: 86%;
  margin: 0 auto;
  margin-top: 2vh;
}
</style>